<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath()}+'/'">
	<meta charset="UTF-8">
	<title>search页</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
     <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style type="text/css">
    *{margin: 0px;padding: 0px;}
    body{
      overflow: auto;
    }
    .thead{
      position: relative;
      height: 100px;
      width: 100%;
      background: #ebebeb;
      line-height: 100px;
      letter-spacing: 20px;
      font-size: 50px;
      text-align: center;
    }
    .tbody{
      margin: 0 auto;
      overflow:hidden;
      width: 1000px;
      height: 900px;
      position: relative;
      /*background-color: green;*/
    }
    .tfoot{
      height: 80px;
      width: 100%;
      text-align: center;
      line-height: 80px;
      background-color: #ebebeb;
    }
    .load{
        position:relative;
        background-color: red;
        width: 100%;
        height: 40px;
       }
    .load_left{
      position: absolute;
      margin-left:500px; 
    } 
    .load_left ol{
      list-style-type: none;
      margin: 0px;
      padding: 0px;
    }
    .load_left li{
      display: inline-block;
      text-align: center;
      width: 100px;
      height: 40px;
      line-height: 40px;
    }
    .load_left li:hover{
      background-color: black;
    }
    .load_left li a{
      text-decoration: none;
      color:  #FFFFF0;
    }
    .load_right{
      position: absolute;
      right:60px; 
    }
    .load_right ol{
      list-style: none;
      margin: 0px;
      padding: 0px;
    }
    .load_right ol li{
      display: inline-block;
      width: 80px;
      height: 40px;
      line-height: 40px;
    }
    .load_right ol li a{
      color:  #FFFFF0;
      text-decoration: none;
    }
    .load_right ol li a:hover{
      color: black;
      text-decoration: none;
    }
    .drop-down:hover .detail{
      display: block;
    }
    .detail{
      display: none;
      position: absolute;
    }
    .detail li{
      display: block;
      width: 50px;
      height: 40px;
      line-height: 40px;
      background-color: red;
      border: 1px solid black;
      text-align: center;
    }
    </style>
    <script type="text/javascript">
        $(function () {

        });
        function add(bookId) {
            var shopNumber=document.getElementById("shopNumber").value;
            location.href="shop/add?bookId="+bookId+"&shopNumber="+shopNumber;
        }
    </script>
</head>
<body>
	<div class="thead">
      <p>图书商城搜索结果展示页</p>
    </div>
    <div class="load">
      <ol class="load_left">
        <li><a href="">首页</a></li>
        <li><a href="">文学类</a></li>
        <li><a href="">惊恐悬疑类</a></li>
        <li><a href="">少儿类</a></li>
        <li><a href="">科幻类</a></li>
        <li><a href="">经管类</a></li>
        <li><a href="">编程类</a></li>
      </ol>
      <div class="load_right">
        <ol>
          <!-- <li>
          <a href="login.html">登录,注册</a>
          </li> -->
          <li class="drop-down">
            <span >欢迎，你</span>
            <ul class="detail">
              <li><a href="user/own">个人信息</a></li>
              <li><a href="shop/queryAllMyShop">我的购物车</a></li>
            </ul>
          </li> 
        </ol>
      </div>
    </div>
    <div class="container">
    	<div class="row" th:each="book:${bookList}" style="margin: 5px;">
    		<div class="col-md-3" style="border: 1px solid #f2f2f2;">
    			<img src="../image/编程类/c语言.jpg"  th:src="${book.bookAddress}" alt="图片" style="width: 150px;height: 150px;">
    		</div>
    		<div class="col-md-9" style="border: 1px solid #f2f2f2; height: 155px;">
    			<ul style="list-style: none;">
    				<li th:text="'书名是：'+${book.bookName}" style="padding: 4px;">图书名</li>
                    <li th:text="'作者是：'+${book.bookWriter}" >作者</li>
    				<li th:text="'图书详情介绍'+${book.bookDetail}" style="padding: 4px;">图书详情</li>
    				<li th:text="'价格是：'+${book.bookPrice}" style="color: red;font-size: 20px;padding-bottom: 4px;">价格</li>
    				<li><input type="number" id="shopNumber" value="1" min="1" max="10"></input>
                        <button style="background-color:red; color: white;padding: 5px;" th:onclick="add([[${book.bookId}]])">加入购物车</button></li>
    			</ul>
    		</div>
    	</div>
<!--        <div class="row">-->
<!--            <nav aria-label="Page navigation">-->
<!--                <ul class="pagination">-->
<!--                    <li>-->
<!--                        <a href="#" aria-label="Previous">-->
<!--                            <span aria-hidden="true">&laquo;</span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li><a href="#">1</a></li>-->
<!--                    <li><a href="#">2</a></li>-->
<!--                    <li><a href="#">3</a></li>-->
<!--                    <li><a href="#">4</a></li>-->
<!--                    <li><a href="#">5</a></li>-->
<!--                    <li>-->
<!--                        <a href="#" aria-label="Next">-->
<!--                            <span aria-hidden="true">&raquo;</span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </nav>-->
<!--        </div>-->
    </div>

    <div class="tfoot">
      <span style="text-align: center;font-size: 20px;">Copyright © 2021 from Wangcheng. All rights reserved.</span>
    </div>
</body>
</html>